<template>
  <h1 class="row-title">普通对话框</h1>
  <div class="row">
    <ct-button @click="visible_default = true">DEFAULT 弹出框</ct-button>
    <ct-button @click="visible_danger = true" type="danger">DANGER 弹出框</ct-button>
    <ct-button @click="visible_success = true" type="success">SUCCESS 弹出框</ct-button>
    <ct-button @click="visible_error = true" type="error">ERROR 弹出框</ct-button>
  </div>

  <h1 class="row-title">不同尺寸的弹出框</h1>
  <div class="row">
    <ct-button @click="visible_small = true">SMALL 小的</ct-button>
    <ct-button @click="visible_medium = true">MEDIUM 中等</ct-button>
    <ct-button @click="visible_large = true">LARGE 大的</ct-button>
    <ct-button @click="visible_huge = true">HUGE 巨大的</ct-button>
  </div>

  <h1 class="row-title">自定义插槽Footer</h1>
  <div class="row">
    <ct-button @click="visible_slot = true" type="primary">底部带有按钮的DIALOG</ct-button>
  </div>

  <!-- 普通对话框 -->
  <ct-dialog v-model:visible="visible_default" @close="visible_default = false"
    >这是一个默认普通的 Dialog 弹出框</ct-dialog
  >
  <ct-dialog v-model:visible="visible_danger" title="DANGER DIALOG" @close="visible_danger = false"
    >这是一个默认普通的 Dialog 弹出框</ct-dialog
  >
  <ct-dialog
    v-model:visible="visible_success"
    title="SUCCESS DIALOG"
    @close="visible_success = false"
    >这是一个默认普通的 Dialog 弹出框</ct-dialog
  >
  <ct-dialog v-model:visible="visible_error" title="ERROR DIALOG" @close="visible_error = false"
    >这是一个默认普通的 Dialog 弹出框</ct-dialog
  >

  <!-- 不同尺寸的弹出框 -->
  <ct-dialog v-model:visible="visible_small" width="10%" top="50%" @close="visible_small = false"
    >这是一个小的弹出框</ct-dialog
  >
  <ct-dialog v-model:visible="visible_medium" width="40%" top="30%" @close="visible_medium = false"
    >这是一个中等弹出框</ct-dialog
  >
  <ct-dialog v-model:visible="visible_large" width="80%" top="10%" @close="visible_large = false"
    >这是一个大的弹出框</ct-dialog
  >
  <ct-dialog v-model:visible="visible_huge" width="100%" top="0" @close="visible_huge = false"
    >这是一个巨大弹出框</ct-dialog
  >

  <!-- 自定义插槽Footer -->
  <ct-dialog v-model:visible="visible_slot" @close="visible_slot = false"
    >这是一个带有自定义插槽弹出框
    <template #footer>
      <ct-button type="info" @click="visible_slot = false">取消</ct-button>
      <ct-button type="primary" @click="visible_slot = false">确认</ct-button>
    </template>
  </ct-dialog>
</template>
<script setup>
import { ref } from 'vue'
const visible_default = ref(false)
const visible_danger = ref(false)
const visible_success = ref(false)
const visible_error = ref(false)

const visible_small = ref(false)
const visible_medium = ref(false)
const visible_large = ref(false)
const visible_huge = ref(false)

const visible_slot = ref(false)
</script>
<style lang="scss" scoped></style>
